<template>
  <div class="floating-buttons" :class="{ active: isExpand }">
    <div class="float-btn" @click.stop="changeActive" :class="{ rotating }">
      <img :src="isExpand ? close : menu" />
    </div>
    <div
      class="button"
      v-for="(button, index) in buttons"
      :key="index"
      :title="button.text"
      :style="getButtonStyle(index)"
      @click="handleClick(button)"
    >
      <img :src="button.icon" />
    </div>
    <el-dialog v-model="phoneShow" title="联系我们" width="500">
      <span style="font-size: 20px">{{ telephone }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="phoneShow = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Dialog } from "vant";
import menu from "@/assets/float-menu.png";
import close from "@/assets/float-close.png";
import navUp from "@/assets/nav-up.png";
import navService from "@/assets/nav-service.png";
import navPhone from "@/assets/nav-phone.png";
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const isExpand = ref<boolean>(false); // 是否展开
const rotating = ref<boolean>(false); // 是否正在旋转
const radius = ref<number>(0); // 按钮中心的半径
const buttons = ref<any>([
  { text: "回到顶部", icon: navUp, type: "up" },
  { text: "客服", icon: navService, type: "chat" },
  { text: "电话", icon: navPhone, type: "phone" },
]);
const phoneShow = ref<boolean>(false); // 是否显示电话弹窗
const telephone = ref<any>("12345678901"); // 电话号码

onMounted(() => {
  document.addEventListener("click", (e) => {
    const target = e.target as HTMLElement;
    if (target.className !== "float-btn" && isExpand.value) {
      isExpand.value = false;
      rotate();
    }
  });
  document.addEventListener("scroll", (e) => {
    const target = e.target as HTMLElement;
    if (target.className !== "float-btn" && isExpand.value) {
      isExpand.value = false;
      rotate();
    }
  });
});

// 处理按钮点击事件
const handleClick = (button: any) => {
  switch (button.type) {
    case "up":
      window.scrollTo({ top: 0, behavior: "smooth" });
      break;
    case "chat":
      if (proxy.isMobile) {
        router.push("/m/contact");
      } else {
        router.push("/pc/contact");
      }
      break;
    case "phone":
      if (proxy.isMobile) {
        Dialog.confirm({
          title: "联系电话",
          message: telephone.value,
          confirmButtonText: "拨打电话",
          confirmButtonColor: "#409eff",
          showCancelButton: true,
          closeOnClickOverlay: true,
        })
          .then(() => {
            window.location.href = `tel:${telephone.value}`;
          })
          .catch(() => {});
      } else {
        phoneShow.value = true;
      }
      break;
  }
};

// 根据按钮的索引计算位置
const getButtonStyle = (index: number) => {
  const angle = (index / buttons.value.length) * 180 - 260; // 分布角度，扇形区域从右下角开始，逆时针分布
  const radian = (angle * Math.PI) / 240; // 角度转弧度
  const x = radius.value * Math.cos(radian);
  const y = radius.value * Math.sin(radian);
  return {
    opacity: isExpand.value ? 1 : 0,
    transform: `translate(-50%, -50%) translate(${x}px, ${y}px)`,
  };
};

// 展开/折叠菜单
const changeActive = () => {
  isExpand.value = !isExpand.value;
  rotate();
};

// 旋转动画
const rotate = () => {
  rotating.value = true;
  radius.value = isExpand.value ? 100 : 0;
  setTimeout(() => {
    rotating.value = false;
  }, 400);
};
</script>
<style lang="scss" scoped>
.floating-buttons {
  position: fixed;
  bottom: 50px;
  right: 20px;
  z-index: 9;
  .float-btn {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #409eff;
    box-shadow: 0 0 10px rgba(64, 160, 255, 0.2);
    z-index: 9;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 10px rgba(64, 160, 255, 0.5);
      animation: float 2s linear infinite;
    }
  }
  .rotating {
    transform: rotate(180deg);
    transition: all 0.4s;
  }
  .button {
    position: absolute;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    z-index: 8;
    left: 50%;
    top: 50%;
    transition: all 0.4s;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    &:hover {
      cursor: pointer;
      box-shadow: 0 0 10px rgba(64, 160, 255, 0.5);
      animation: float 2s linear infinite;
    }
  }
}
@keyframes float {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(64, 160, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(64, 160, 255, 0.5);
  }
}
</style>
<style>
.van-popup-conte {
  padding: 20px;
}
</style>
